import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Card, SearchBar,List } from "antd-mobile";
import { LocationFill } from "antd-mobile-icons";
import request from "../../api/request";
import style from '../list/index.module.css'
function Index() {
  const navigate = useNavigate();
  const back = () => navigate("/index");
  const [ setCityList] = useState([]);
  const [ setHotCities] = useState([]);

  const FeachList = async () => {
    const res = await request.get("/api/city");
    console.log(res);
    if (res.code === 200) {
      setCityList(res.data);
      setHotCities(res.data);
    }
  };

  useEffect(() => {
    FeachList();
  }, []);
  return (
    <div>
      <NavBar onBack={back}>城市列表</NavBar>

      <SearchBar placeholder="请输入内容" />

      <Card title="我的位置">
        <LocationFill /> 北京
      </Card>

      <Card title="热门城市">
       
        <div className={style.hot}>
            <span>北京</span>
              <span>上海</span>
              <span>广州</span>
              <span>深圳</span>
              <span>南京</span>
              <span>武汉</span>
              <span>杭州</span>
              <span>西安</span>
              <span>郑州</span>
              <span>成都</span>
              <span>长沙</span>
              <span>天津</span>
        </div>
              
            
      </Card>

      
        <List.Item className={style.citylist}>
          <ul >
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
            <li>安顺</li>
          </ul>
        </List.Item>

    </div>
  );
}

export default Index;
